<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>登录</title>
    <link href="../static/favicon.ico" th:href="@{favicon.ico}" rel="icon"/>
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet" type="text/css"/>
    <link href="../static/css/login.min.css" th:href="@{/css/login.min.css}" rel="stylesheet" type="text/css"/>
</head>
<body>
    <div class="container">
        <form class="form-signin">
            <h2 class="form-signin-heading">登录</h2>
            <label for="username" class="sr-only">用户名：</label>
            <input type="text" id="username" class="form-control" placeholder="用户名" autofocus>
            <label for="password" class="sr-only">密码</label>
            <input type="password" id="password" class="form-control" placeholder="密码" required>
            <!--<div class="checkbox">
                <label>
                    <input type="checkbox" value="rememberMe">记住我
                </label>
            </div>-->
            <button class="btn btn-lg btn-primary btn-block" type="button" onclick="login()">登录</button>
        </form>
    </div>
    <script src="../static/js/jquery-3.5.1.min.js" th:src="@{/js/jquery-3.5.1.min.js}" type="text/javascript"></script>
    <script src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}" type="text/javascript"></script>
    <script>
        function login() {
            var username = $("#username").val();
            var password = $('#password').val();
            $.ajax({
                type: "post",
                url: "/login",
                data: {
                    username: username,
                    password: password
                },
                success: function(data) {
                    if (data.code == 20000) {
                        location.href = '/index';
                    } else {
                        alert(data.message);
                    }
                }
            });
            return false;
        }
    </script>
</body>
</html>